<template>
  <div class="box-content">
    <a-form-model class="form" :model="form" style="overflow: hidden">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="刊物标题" required>
            <a-input v-model="form.title" placeholder="请输入刊物标题" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="刊物类型">
            <s-select :selectOption="serialType" v-model="form.serialType" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="刊物刊号" required>
            <span>{{ year }}年</span>
            <a-input
              v-model="form.serialNumber"
              style="width: 50px; margin: 0 10px"
            />
            <span>号</span>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="上报人" required>
            <a-input v-model="form.whistleblower" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="主题类型" required>
            <s-select
              :selectOption="themeTypeOption"
              v-model="form.themeType"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item label="刊物内容" required>
        <a-textarea
          placeholder="请输入刊物内容"
          :rows="8"
          style="height: 400px"
        />
      </a-form-model-item>
      <a-form-model-item label="附件" style="margin: 15px 0px">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :multiple="true"
          :file-list="fileList"
          @change="handleChange"
        >
          <a-button> <a-icon type="upload" /> Upload </a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item>
        <div slot="label" style="display: inline-block">
          <p>是否被全国</p>
          <p>政协采用</p>
        </div>
        <a-radio-group v-model="form.use">
          <a-radio :value="1">采用</a-radio>
          <a-radio :value="0">不采用</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否通报">
        <a-radio-group v-model="form.notification">
          <a-radio :value="1">采用</a-radio>
          <a-radio :value="0">不采用</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否公开">
        <a-radio-group v-model="form.open">
          <a-radio :value="1">采用</a-radio>
          <a-radio :value="0">不采用</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <div class="form-footer">
        <a-button type="primary" @click="onSubmit">确定</a-button>
        <a-button style="margin-left: 10px" @click="$router.back()">
          取消
        </a-button>
      </div>
    </a-form-model>
    <choice-modal :visible.sync="choiceVisible" />
  </div>
</template>
<script>
import moment from 'moment'
import { socialPublic } from 'assets/js/select-option-list'
import choiceModal from 'components/base/choiceModal'
export default {
  components: { choiceModal },
  data() {
    return {
      year: moment().format('YYYY'),
      choiceVisible: false, //上报人弹框
      socialPublic,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      plainOptions: [
        { label: '请选择', value: '' },
        { label: '党派', value: '党派' },
        { label: '团体', value: '团体' },
        { label: '专委会', value: '专委会' },
        { label: '界别', value: '界别' },
        { label: '当前届次委员', value: '当前届次委员' },
        { label: '往届委员', value: '往届委员' },
        { label: '机关工作人员', value: '机关工作人员' }
      ],
      serialType: [
        { key: '', label: '请选择刊物类型' },
        { key: '1', label: '社情民意' },
        { key: '2', label: '民情' },
        { key: '3', label: '普刊' }
      ],
      themeTypeOption: [
        { key: '', label: '请选择主题类型' },
        { key: '1', label: '文化建设' },
        { key: '2', label: '街道文化建设' },
        { key: '3', label: '经济建设' }
      ],
      treeData: [
        {
          title: '=主题类型=',
          value: '',
          key: '1'
        },
        {
          title: '文化建设',
          value: '文化建设',
          key: '2',
          children: [
            {
              value: '街道文化建设',
              key: '2-1',
              title: '街道文化建设'
            }
          ]
        },
        {
          title: '经济建设',
          value: '经济建设',
          key: '3'
        },
        {
          title: '政协建设',
          value: '政协建设',
          key: '4'
        }
      ],
      form: {
        name: undefined,
        region: undefined,
        date1: undefined,
        delivery: false,
        type: undefined,
        resource: '',
        desc: '',
        remind: false,
        serialType: '',
        topicTypeVal: '',
        urgent: '',
        jointly: 1,
        serialNumber: '', //刊物刊号
        whistleblower: '', //上报人
        themeType: '', //主题类型
        open: 1,
        use: 1,
        notification: 1
      },
      fileList: []
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    },
    handleChange(info) {
      let fileList = [...info.fileList]

      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2)

      // 2. read from response and show file link
      fileList = fileList.map((file) => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url
        }
        return file
      })

      this.fileList = fileList
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-calendar-picker-input {
  line-height: 40px;
}
.box-content {
  padding-right: 20px;
}
</style>